<!-- 放置html代码， template里面的放置的元素有一个根标签-->
<template>
  <!-- 定义的卡片组件 -->
  <el-card>
    <div slot="header">
      <!-- 面包屑组件 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>日志信息管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 布局组件 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input v-model="opername" clearable @clear="findPager" placeholder="根据操作人姓名查询"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="findPager" icon="el-icon-search">查询</el-button>
      </el-col>
    </el-row>
    <!-- 定义表格组件  表格组件中的“:data”属性是绑定数据的，数据是一个数组-->
    <el-table :data="tableData">
      <!-- 定义个表格单元格 -->
      <el-table-column prop="opername" label="操作人"></el-table-column>
      <el-table-column prop="opertime" label="操作时间"></el-table-column>
      <el-table-column prop="ip" label="操作IP"></el-table-column>
      <el-table-column prop="methods" label="操作方法"></el-table-column>
      <el-table-column prop="ddesc" label="方法描述"></el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pager.page"
      :page-sizes="[5, 15, 20, 25]" :page-size="pager.limit" layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total">
    </el-pagination>
  </el-card>
</template>
<!-- 行为区，放置js代码，包含请求后端的ajax代码 -->
<script>
  export default {
    data() { //定义属性区
      return {
        tableData: [], //定义表格的数组，初始化表格数据
        pager: { //封装分页对象
          page: 1, //分页起始数据
          limit: 5, //每页显示最大条数
          total: 0 //统计记录数
        },
        opername:''//根据操作人名称查询
      }
    },
    methods: { //用户自定方法区

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pager.limit = val;
        this.findPager();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pager.page = val;
        this.findPager()
      },

      findPager() {
        this.$http.get('http://114.55.238.138:9000/api/logs/findPager', {
          params: {
            page: this.pager.page,
            limit: this.pager.limit,
            opername: this.opername
          }
        }).then(res => {
          console.info(res);
          this.tableData = res.data.data.data; //数据
          this.pager.total = res.data.data.count; //统计记录数
        }).catch(err=>{
           this.$message.error('错了哦，网络异常');
        })

      }
    },

    created() { //vue技术的生命周期函数，浏览器在加载当前页面时自动渲染里面的代码
      this.findPager();
    }

  }
</script>


<!-- 样式区，放置css样式 -->
<style scoped>
  .el-pagination {
    margin-top: 10px;
  }

  .el-breadcrumb {
    margin-bottom: 20px;
  }
</style>
